import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Type,Food} from '../../../types/food'
import FoodItem from '../../../component/food_item'
interface Iprops{
    list:Type[]
}

interface Istate{
    status:string
}

let hotbit = ['常吃','偶尔','不吃'];

interface Collector{
    t_id:number,
    list:Food[]
}

interface FormatData{
    "常吃":Collector,
    "偶尔":Collector,
    "不吃":Collector,
    [propName:string]:any
}


class My extends Component <Iprops,Istate>{
    state = {
        status:'常吃'
    }
    render() {
        
        let {status} = this.state;
        /**
         * let obj = {
         *      "常吃":{
         *          t_id:
         *          list:[]
         *      },
         *      "偶尔":{
         *          t_id:
         *          list:[] 
         *      },
         *      "不吃":{
         *           t_id:
         *          list:[]
         *      }
         * }
         * 
        */
       
        let list = this.props.list; //仓库取出来的数据
        let obj:FormatData = {
            "常吃":{
                t_id:-1,
                list:[]
            },
            "偶尔":{
                t_id:-1,
                list:[]
            },
            "不吃":{
                t_id:-1,
                list:[]
            }
        }

        list.forEach((item:Type) => {
            item.children.forEach((v:Food) => {
                if(v.frequency){
                   obj[v.frequency].list.push(v);
                   obj[v.frequency].t_id = item.t_id;
                }
            })
        })
        return (
            <div>
                <div>
                    {hotbit.map(item => <span onClick={() => {
                        this.setState({
                            status:item
                        })
                    }}>{item}</span>)}
                </div>
                <div>
                    {hotbit.map(item => <div style={{display:status === item?'block':'none'}}>
                        {obj[item].list.map((v:Food) => <FoodItem t_id={obj[item].t_id} {...v}></FoodItem>)}
                    </div>)}
                </div>
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return {
        list:state.list
    }
}

export default connect(stateMapToProps)(My)
